<link rel="stylesheet" href="../font/iconfont.css">
<style>
    .welcome .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }
    
    .welcome .icon {
        margin-right: 10px;
        color: #1aa094;
    }
    
    .welcome .icon-cray {
        color: #ffb800 !important;
    }
    
    .welcome .icon-blue {
        color: #1e9fff !important;
    }
    
    .welcome .icon-tip {
        color: #ff5722 !important;
    }
    
    .welcome .layuimini-qiuck-module {
        text-align: center;
        margin-top: 4px
    }
    
    .welcome .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    
    .welcome .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }
    
    .welcome .welcome-module {
        width: 100%;
        height: 210px;
    }
    
    .welcome .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }
    
    .welcome .panel-body {
        padding: 10px
    }
    
    .welcome .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }
    
    .welcome .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }
    
    .welcome .layui-red {
        color: red
    }
    
    .welcome .main_btn>p {
        height: 40px;
    }
    
    .welcome .layui-bg-number {
        background-color: #F8F8F8;
    }
    
    .welcome .layuimini-notice:hover {
        background: #f6f6f6;
    }
    
    .welcome .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }
    
    .welcome .layuimini-notice-title,
    .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    
    .welcome .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }
    
    .welcome .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }
    
    .welcome .layuimini-notice-title {
        width: 310px;
    }
    
    .welcome .layuimini-notice {
        padding: 0px 16px;
    }
    
    .layui-layer-dialog .layui-layer-padding {
        padding: 0;
    }
    
    .layui-layer-dialog .layui-layer-content {
        padding: 12px;
    }
    
    .layui-layer-dialog .layui-layer-content div {
        text-indent: 2em;
        font-size: 16px;
    }
    
    .layui-layer-dialog .layui-layer-content img {
        width: 230px;
        margin-left: 98px;
    }
    
    .layui-layer-dialog .layui-layer-content p {
        color: #8a8a8a;
        padding-top: 10px;
    }
    
    .layui-layer-dialog .layui-layer-content h3 {
        font-weight: 600;
        font-size: 18px;
    }
    
    .layui-layer-dialog .layui-layer-content .layui-layer-ico {
        display: none;
    }
    
    .data-area {
        display: flex;
        align-items: center;
        background: #F8F8F8;
        padding: 10px 5px;
    }
    
    .layuimini-qiuck-module p:nth-child(1) {
        color: #8e9193;
        text-align: left;
        font: 600 17px '';
        background: #F8F8F8;
    }
    
    .layuimini-qiuck-module p:last-child {
        line-height: 16px;
    }
    
    .data-area i {
        height: 49px;
        line-height: 10px;
        font-size: 24px;
        display: block;
        padding-right: 10px;
        background-color: transparent;
    }
    
    .data-area>div {
        text-align: left;
    }
    
    .layui-tab-content {
        padding: 0;
    }
    
    .layui-tab-title,
    .layui-tab-title .layui-this:after {
        height: 26px;
    }
    
    .layui-tab-title li {
        line-height: 24px;
    }
    
    #notice a {
        color: #333;
        text-decoration: none;
    }
    
    .layuimini-notice {
        position: relative;
    }
    
    .layuimini-notice::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 0;
        background: #1e9fff;
        padding: 2px;
        border-radius: 50%;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>设备信息</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>主机信息</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"><span id="hostmain"></span></h1>
                                                        <small><span id="hostinfo"></span></small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>CPU信息</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"><span id="cpumain"></span></h1>
                                                        <small><span id="cpuinfo"></span></small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>内存信息</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"><span id="memmain"></span></h1>
                                                        <small><span id="meminfo"></span></small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>存储信息</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins"><span id="diskmain"></span></h1>
                                                        <small><span id="diskinfo"></span></small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>网络信息</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck port">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <!-- 
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div> -->
                                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">接收</li>
                                        <li>发送</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <div id="echarts-send" style="width: 100%;min-height:420px"></div>
                                        </div>
                                        <div class="layui-tab-item layui-show">
                                            <div id="echarts-receive" style="width: 100%;min-height:420px"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text" id="notice">
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header" style="display: flex;"><i class="iconfont icon-blue" style="display: block; margin-right: 10px;">&#xe608;</i>端口统计</div>
                    <div class="layui-card-body" style="height: 105px;">
                        <div class="welcome-module">
                            <div class="layui-row layui-col-space10 layuimini-qiuck">
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="iconfont icon-blue" style="height: 50px;line-height: 2px;">&#xe608;</i>
                                        <div data-value="eth0">
                                            <p>ETH0</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="iconfont icon-blue" style="height: 50px;line-height: 2px;">&#xe608;</i>
                                        <div data-value="eth1">
                                            <p>ETH1</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-microchip icon" style="color: #333;"></i>网络统计</div>
                    <div class="layui-card-body">
                        <div class="welcome-module">
                            <div class="layui-row layui-col-space10 layuimini-qiuck">
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="fa fa-microchip"></i>
                                        <div data-value="can0">
                                            <p>CAN0</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="fa fa-microchip"></i>
                                        <div data-value="can1">
                                            <p>CAN1</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="fa fa-microchip"></i>
                                        <div data-value="can2">
                                            <p>CAN2</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layuimini-qiuck-module">
                                    <div class="data-area">
                                        <i class="fa fa-microchip"></i>
                                        <div data-value="can3">
                                            <p>CAN3</p>
                                            <p>总接收:<span>0</span> MB</p>
                                            <p>总发送:<span>0</span> MB</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/lay-module/moment.min.js"></script>
<script>
    function toSapceSize(limit) {
        var size = "";
        if (limit < 0.1 * 1024) { //小于0.1KB，则转化成B
            size = limit.toFixed(2) + "B"
        } else if (limit < 0.1 * 1024 * 1024) { //小于0.1MB，则转化成KB
            size = (limit / 1024).toFixed(2) + "KB"
        } else if (limit < 0.5 * 1024 * 1024 * 1024) { //小于0.1GB，则转化成MB
            size = (limit / (1024 * 1024)).toFixed(2) + "MB"
        } else { //其他转化成GB
            size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
        }

        var sizeStr = size + ""; //转成字符串
        var index = sizeStr.indexOf("."); //获取小数点处的索引
        var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
        if (dou == "00") { //判断后两位是否为00，如果是则删除00               
            return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
        }
        return size;
    }
    layui.use(['layer', 'echarts'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        var filtration = ["dummy0", "sit0", "lo"],
            list = [],
            nowDate = +new Date(),
            echartsSend = {
                chart: {},
                data: [],
                type: 1,
            },
            echartsReceive = {
                chart: {},
                data: [],
                type: 2,
            },
            oldNum = {
                /*  l: [],
                  r: []*/
            };

        $.ajax({
            url: "/xapi/netfaces",
            type: "GET",
            success: function(data) {
                data.forEach(e => {
                    var status = e.flags.split("|"),
                        className, text;
                    status.includes("up") ? (className = "layui-bg-green", text = "在线") : (className = "layui-bg-gray", text = "离线")
                    $(".port").append(`
                <div class="layui-col-xs6">
                    <div class="panel layui-bg-number">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right ${className}">${text}</span>
                                <h5>${e.name?e.name:"-"}</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">${e.ip?e.ip:"-"}</h1>
                                <small>${e.mask?e.mask:'-'};${e.gateway?e.gateway:"-"}</small>
                            </div>
                        </div>
                    </div>
                </div>
                `)
                })
            },
        });

        $.ajax({
            url: "https://www.openzbox.com/notice.json?_=" + nowDate,
            type: "GET",
            success: function(data) {
                data = JSON.parse(data)
                data.notice.length = 10;
                $("#notice").append(data.notice.map(e => `<a href="${e.url}"  target="_blank">
                    <div class="layuimini-notice">
                            <div class="layuimini-notice-title">${e.title}</div>
                            <div class="layuimini-notice-extra">${moment(e.published).format("YYYY-MM-DD HH:mm:ss")}</div>
                            <div class="layuimini-notice-content layui-hide">
                                <h3>${e.title}</h3>
                                <p>${moment(e.published).format("YYYY年MM月DD日 HH:mm:ss")} ${e.author}</p>
                                <img src="${e.image}" alt="">
                                <div>${e.description}</div>
                            </div>
                        </div></a>
                `))
            },
        });

        function updateSysinfo() {
            $.ajax({
                url: '/xapi/sysinfo?_=' + nowDate,
                type: "GET",
                success: function(data) {
                    updateInfoPanel(data);
                    createChart(data);
                    setInterval(function() {
                        addEchartData();
                    }, 1000 * 5)
                },
                error: function() {},
            });
        }

        function updateInfoPanel(data) {
            var cinfo = data["cpuinfo"][0];
            $("#cpumain").text((cinfo["cpuusedpercent"]).toFixed(1) + "%");
            $("#cpuinfo").text(cinfo["modelName"]);

            var hostinfo = data["hostinfo"];
            $("#hostmain").text(hostinfo["hostname"] + "(" + hostinfo["kernelVersion"] + ")");
            var CrDate = new Date();
            CrDate.setTime(hostinfo["bootTime"] * 1000);
            $("#hostinfo").text("Uptime:" + Math.ceil(hostinfo["uptime"] / 60 / 60) + "h,Boottime:" + CrDate.toLocaleString());

            var meminfo = data["meminfo"];
            $("#memmain").text((meminfo["usedPercent"]).toFixed(1) + "%");
            $("#meminfo").text("Total:" + toSapceSize(meminfo["total"]) + "  Free:" + toSapceSize(meminfo["free"]));

            var diskinfo = data["diskinfo"];
            $("#diskmain").text((diskinfo["usedPercent"]).toFixed(1) + "%");
            $("#diskinfo").text("Total:" + toSapceSize(diskinfo["total"]) + "  Free:" + toSapceSize(diskinfo["free"]));
        }
        /**
         * 查看公告信息
         **/
        var msg
        $('body').on('mouseenter', '.layuimini-notice', function(e) {　
            var e = e || window.event;　
            var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;　
            var y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            var content = $(this).children('.layuimini-notice-content').html();
            msg = parent.layer.msg(content, {
                icon: false,
                time: 0,
                area: ["450px"],
                offset: [y - 50 + 'px', '47vw']
            });
        });

        $("#notice").mouseleave(function() {
            parent.layer.close(msg)
        });
        /**
         * 报表功能
         */

        const toFixed2 = (e) => +((+e / 1024 / 1024).toFixed(2));

        function createChart({
            iocounts
        }) {
            list = filtrationData(iocounts)
            list.forEach(e => {
                var $div = $(`div[data-value='${e.name}']`);
                $div.find("p:nth-child(2) span").text(toFixed2(e.bytesRecv))
                $div.find("p:nth-child(3) span").text(toFixed2(e.bytesSent))
            });
            setData(list, "bytesRecv", echartsReceive);
            setData(list, "bytesSent", echartsSend);
            echartsSend.chart = echarts.init(document.getElementById('echarts-send'), 'walden');
            echartsReceive.chart = echarts.init(document.getElementById('echarts-receive'), 'walden');
            $($(".layui-tab-item").eq(1)).removeClass("layui-show")
            echartsSend.chart.setOption(getOption(echartsSend.data));
            echartsReceive.chart.setOption(getOption(echartsReceive.data));
        }

        function addEchartData() {
            $.ajax({
                url: '/xapi/sysinfo',
                type: "GET",
                success: function(data) {
                    updateInfoPanel(data);
                    nowDate = +new Date();
                    list = filtrationData(data.iocounts);
                    list.forEach(e => {
                        var $div = $(`div[data-value='${e.name}']`);
                        var $recv = $div.find("p:nth-child(2) span");
                        var $sent = $div.find("p:nth-child(3) span");
                        $recv.text(toFixed2(e.bytesRecv))
                        $sent.text(toFixed2(e.bytesSent))
                    })
                    setData(list, "bytesRecv", echartsReceive);
                    setData(list, "bytesSent", echartsSend);
                    setLength(echartsSend)
                    setLength(echartsReceive)
                    echartsSend.chart.setOption({
                        series: echartsSend.data,
                    });
                    echartsReceive.chart.setOption({
                        series: echartsReceive.data,
                    });
                },
                error: function() {

                },
            });
        }

        function setLength(chart) {
            var length = chart.data[0].data.length;
            if (length > 288) {
                chart.data.map(e => e.data.shift());
            }
        }

        function getOption(data, leg) {
            return {
                tooltip: {
                    trigger: 'axis',
                    confine: true
                },
                legend: {
                    data: leg,
                    top: 10,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: "15%",
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value) {
                            return moment(value).format("HH:mm");
                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "KB"
                },
                series: data
            }
        };

        function setData(data, type, chart) {
            if (chart.data.length === 0) {
                chart.data = data.map((e, i) => {
                    oldNum[chart.type + "." + e.name + "." + i] = e[type];
                    return {
                        name: e.name,
                        type: 'bar',
                        showSymbol: false,
                        data: [
                            [moment(nowDate).format("YYYY-MM-DD HH:mm:ss"), 0] //(e[type] / 1024).toFixed(2)
                        ]
                    }
                });
            } else {
                var d;
                chart.data.map((e, n) => {
                    var c = data.find(i => i.name === e.name) || {};
                    /*if (chart.type === 1) {
                        d = c[type] - oldNum.l[n]
                        oldNum.l[n] = c[type]
                    }
                    if (chart.type === 2) {
                        d = c[type] - oldNum.r[n]
                        oldNum.r[n] = c[type]; 
                    }*/
                    d = c[type] - oldNum[chart.type + "." + e.name + "." + n];
                    oldNum[chart.type + "." + e.name + "." + n] = c[type];
                    //console.log(c);
                    return e.data.push([moment(nowDate).format("YYYY-MM-DD HH:mm:ss"), (d / 1024).toFixed(2)])
                });

            }
        }

        function filtrationData(data) {
            var l = []
            data.forEach(e => {
                !filtration.includes(e.name) && (l[l.length] = e)
            });
            return l.sort((a, b) => {
                return a.name < b.name ? -1 : 1
            });

        }
        // echarts 窗口缩放自适应
        window.onresize = function() {
            //echartsRecords.resize();
        }

        updateSysinfo();



    });
</script>